import styled from 'styled-components'
import border from '../styled/border'
// ../../../assets/images/my/wd_back.png
import A from 'assets/images/my/wd_back.png'

const Div=styled.div`
    height:100%;
    display:flex;
    flex-direction:column;
`

const Header=styled.div`
    background-image:url(${A});
    background-size:100% auto;
    background-position-y:-.2rem;
    background-repeat:no-repeat;
    height:1.25rem;
    margin-top:-.02rem;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    img{
        width:.65rem;
        height:.65rem;
        border-radius:50%;
    }
`
const Login=styled.div`
    text-align:center;
    p.first-con{
        width:.63rem;
        height:.26rem;
        display:inline-block;
        a{
            text-decoration:none;
            color:#000;
            font-size:.14rem;
            font-weight:500;
            font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft YaHei", "Microsoft Jhenghei", sans-serif;
        }
    }
    div.second-con{
        display:flex;
        justify-content:center;
        padding-top:.05rem;
        /* width:.64rem; */
        dt{
            a{
                color:#C0C0C0;
                font-size:.12rem;
            }
        }
        dl:first-child{
            padding-right:.57rem;      
        }
        dd{
            padding-top:.02rem;
            color:#646464;
            font-size:.13rem;
        }
    }
    div.third-con{
        margin-top:.2rem;
        display:flex;
        justify-content:space-around;
        /* vertical-align:middle; */
        dl{
            height:.35rem;
        }
        dl:first-child{
            dt{
                color:#FFB538;
                font-size:.16rem;
                text-align:left;
                em{
                    font-size:.24rem;
                    color:#666;
                }
            } 
        }
        dl:last-child{
            img{
                width:.35rem;
                height:.35rem;
            }
        }
        dd{
            font-size:.12rem;
            color:#646464;
        }
    }
    
`
const Nav =border({
    width:'0 1px 2px 1px', 
    radius:10,
    comp:styled.div`
    margin:.32rem .2rem .3rem;
    padding:.1rem;
    display:flex;
    justify-content:space-around;
    dt{
        text-align:center;
        img{
        width:.45rem;
        height:.45rem;
        }
    }

    dd{
        text-align:center;
        padding-top:.1rem;
        color:#646464;
        font-size:.13rem;
    }
`
})

const LastNav=styled.div`
    flex:1;
    overflow:scroll;
    padding:0 .2rem .64rem;
    /* margin-bottom:.64rem */
    p{
        display:flex;
        justify-content:space-between;
        padding: .15rem 0;
        align-items:center;
        img{
            width:.2rem;
            height:.2rem;
        }
        em{
            flex:1;
            font-size:.14rem;
            color:#646464;
            text-align:left;
            padding-left:.15rem;
        }
    }

`
const MyP=border({
    comp:styled.p``,
    width:'0 0 1px 0',
})


export {Header,Login,Nav,LastNav,MyP,Div}